import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import { Flex, Button, InputItem, Icon } from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {mobile} from "../../utils/judgmentEquipment";
import {Toast} from "antd-mobile/lib/index";
import {createForm} from "rc-form";
import { bind, getCode, btn } from './bindPhone.less';
import username from '../../assets/svg/username.svg';
import code from '../../assets/svg/code.svg';



class BuildPhone extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Phone:this.props.match.params.data,
            countDown:60,
            showCountDown: false,
            value: 1,
            getCodeText: '获取验证码',
        };


    }

    componentWillMount(){
        //console.log(this.state.Phone)
    }
    postCheck = () => {
        const {Yzm,Phone} = this.props.form.getFieldsValue();
        if (Phone== undefined) {
            Toast.info('请输入手机号码', 1)
            return;
        }
        this.props.dispatch({
            type: 'accountManagement/PhoneCheckEFF',
            obj: {mobile: Phone}
        }).then(result => {
                if (result.msg=='短信发送失败') {
                    Toast.fail(result.msg, 1.5,
                        // () => this.props.dispatch(routerRedux.replace({pathname: '/accountManagement' }))
                    )

                } else if (result.code == 200) {
                    this.countDown();
                }else{
                };
            }
        )
    }
    checkSure=()=>{
        const {Yzm,Phone} = this.props.form.getFieldsValue();
        console.log(Yzm)
        if (Phone== undefined) {
            Toast.info('请输入手机号码', 1)
            return;
        }
        if (Yzm== undefined) {
            Toast.info('请输入验证码', 1)
            return;
        }

        //------------------------------------(有待修改验证)+接口验证
        this.props.dispatch({type: 'accountManagement/putBindEFF', obj: {mobile: this.props.match.params.data, code: Yzm}}).then(result => {
                if (result.code == 200) {
                    this.props.dispatch(routerRedux.push({pathname: `/my`}));
                }else{
                    Toast.fail(result.msg,2)
                }
            }
        )


    }
    countDown = () => {
        const self = this;
        this.timout = window.setTimeout(function () {
            if (self.state.countDown > 0) {
                self.setState({countDown: self.state.countDown - 1, showCountDown: true});
                self.countDown();
            } else {
                self.setState({
                    showCountDown: false,
                    countDown: 60,
                    getCodeText: '重新获取验证码',
                });
            }
        }, 1000, 0);


    }
    render() {
        const { getFieldProps } = this.props.form;
        return (
            <Flex className={ bind } style={{
                height:"100%",
                backgroundColor: '#fff'
            }} direction="column">
                <NavTopBar title="绑定新手机号" dispatch={this.props.dispatch}/>
                <Flex direction="column" style={{width:'90%',height:'3rem',background:'#fff',paddingTop:'.5rem',marginLeft:'.2rem'}}>
                      {/* <input type="text"{...getFieldProps('Phone')} placeholder={'输入新手机号码'} style={{width:'60%',height:'.5rem'}}/>
                    <Flex style={{width:'100%',justifyContent:'center',marginTop:'.45rem' }}>
                        <input type="text"{...getFieldProps('Yzm')} placeholder={'输入验证码'} style={{width:'21%',height:'.5rem'}}/>
                        { this.state.showCountDown==true? <div  className='regist_yzm' style={{paddingLeft:'.3rem'}} >
                            {this.state.countDown}秒后重新获取
                        </div> : <span style={{marginLeft:'.4rem',padding:'0 .2rem',lineHeight:'.7rem',fontSize:'.3rem',border:'1px solid #e5e5e5',borderRadius:'45px',display:'inline-block'}}onClick={this.postCheck}>获取验证码</span>}
                        <span style={{marginLeft:'.2rem',padding:'0 .2rem',lineHeight:'.7rem',fontSize:'.3rem',border:'1px solid red',borderRadio:'4%',display:'inline-block'}}>获取验证码</span>
                    </Flex>
                    <span><input type="text" placeholder={'输入验证码'} style={{width:'40%',height:'.5rem'}}/></span> */}
                    <InputItem
                        {...getFieldProps('Phone')}
                        style={{height: '1.2rem', position: 'relative'}}
                        clear
                        placeholder="输入新手机号码"
                        >
                        <Icon type={username.id}/>
                    </InputItem>


                    <InputItem
                        {...getFieldProps('Yzm')}
                        style={{height: '1.2rem', position: 'relative'}}
                        clear
                        placeholder="请输入验证码"
                        >
                        <Icon type={code.id}/>

                        <div className={ getCode }>
                            {
                                this.state.showCountDown ?
                                <div  className='regist_yzm' style={{paddingLeft:'.1rem'}} >
                                    {this.state.countDown}秒后重新获取
                                </div> :
                                <span style={{marginLeft:'.2rem',padding:'0 .2rem',lineHeight:'.7rem',fontSize:'.3rem',border:'1px solid #e5e5e5',borderRadius:'45px',display:'inline-block'}} onClick={this.postCheck}>
                                    {this.state.getCodeText}
                                </span>
                            }
                        </div>
                    </InputItem>

                </Flex>
                <Button className={ btn } onClick={this.checkSure} >确定</Button>



            </Flex>
        );
    }
}


export default connect(({ accountManagement}) => ({ accountManagement}))(createForm()(BuildPhone));
